<template>
    <div class="page-wrap">
        <h2>以指令的形式，让溢出的文本进行左右交替滚动展示</h2>
        <h3>引入和注册（main.js）</h3>
        <div>
            <el-input type="textarea" :rows="2" placeholder="请输入内容" :value="code">
            </el-input>
        </div>
        <h3>基本使用 v-text-scroll</h3>
        <div>
            <el-input type="textarea" :rows="4" placeholder="请输入内容" :value="code2">
            </el-input>
        </div>
        <h3 style="color: #409EFF;">效果</h3>
        <div class="flex-box">
            <div class="label-text">Vue.js：</div>
            <div class="value-text" v-text-scroll="msg"></div>
        </div>
    </div>
</template>

<script>
export default{
    data(){
        return {
            code: `import vTextScroll from '@/plugins/v-text-scroll.js'
Vue.use(vTextScroll)`,

            code2: `<div class="flex-box">
            <div class="label-text">Vue.js：</div>
            <div class="value-text" v-text-scroll="msg"></div>
        </div>`,
            msg: "Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的JavaScript框架"
        }
    }
}
</script>

<style scoped>
.page-wrap{
    padding: 20px;
}
.page-wrap h2{
    margin-top: 0;
}
.flex-box{
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    padding: 5px;
    margin: 0 auto;
    width: 400px;
}
.flex-box .label-text{
    flex-grow: 0;
    flex-shrink: 0;
}
.flex-box .value-text{
    flex-grow: 1;
    flex-shrink: 1;
}
</style>